<template>
  <div>
    <x-header :left-options="{showBack: false}">订单</x-header>

    <div>
      <div style="margin: 10px;position: relative;">
        <flexbox @click.native="greet()" class="home-vip right-arrow">
          <flexbox-item :span="3">
            <img src="../assets/cart_sel.png" style="display: block;margin: 0 auto;width: 40px;height: 40px;"/>
          </flexbox-item>
          <flexbox-item :span="10">
            <h4>腾讯会员VIP（15-20天）</h4>
            <p style="color: #888;">订单金额 <span style="color: DarkOrange;padding-left: 10px;">¥3.90</span></p>
            <p style="color: #888;">订单时间<span style="color: DarkOrange;"> 2018-08-17 12:12:01</span></p>
          </flexbox-item>
        </flexbox>
      </div>

      <div style="margin: 10px;position: relative;">
        <flexbox @click.native="greet()" class="home-vip right-arrow">
          <flexbox-item :span="3">
            <img src="../assets/account_sel.png" style="display: block;margin: 0 auto;width: 40px;height: 40px;"/>
          </flexbox-item>
          <flexbox-item :span="10">
            <h4>优酷会员VIP(30天)</h4>
            <p style="color: #888;">订单金额 <span style="color: DarkOrange;padding-left: 10px;">¥9.90</span></p>
            <p style="color: #888;">订单时间 <span style="color: DarkOrange;">2018-08-19 12:12:11</span></p>
          </flexbox-item>
        </flexbox>
      </div>
    </div>

    <tabbar style="position: fixed">
      <tabbar-item link="/">
        <img slot="icon" src="../assets/home-normal.png">
        <img slot="icon-active" src="../assets/home-sel.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item selected>
        <img slot="icon" src="../assets/cart.png">
        <img slot="icon-active" src="../assets/cart_sel.png">
        <span slot="label">订单</span>
      </tabbar-item>
      <tabbar-item link="/mine">
        <img slot="icon" src="../assets/account.png">
        <img slot="icon-active" src="../assets/account_sel.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import {Tabbar, TabbarItem, CellFormPreview, FormPreview, XInput, Flexbox, FlexboxItem} from 'vux'

  export default {
    name: 'order',
    components: {
      Tabbar,
      TabbarItem,
      CellFormPreview,
      FormPreview,
      XInput,
      Flexbox,
      FlexboxItem
    },
    data() {
      return {
        list: [{
          label: '商品',
          value: '电动打蛋机'
        }, {
          label: '标题标题',
          value: '名字名字名字'
        }, {
          label: '标题标题',
          value: '很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字'
        }]
      }
    },
    methods: {
      greet: function () {
        this.$router.push({name: 'orderDetail'})
      }
    }
  }
</script>

<style scoped>
  .home-vip {
    background-color: #fff;
    width: auto;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #eee;
  }
</style>
